<template>
  <div class="wrap flex">
    <div class="data-item flex fw" v-for="(item, index) in dataInfo" :key="'data' + index">
      <i>{{ item.label }}</i>
      <span
        >{{ item.number }}<span class="plus">{{ item.numberUnit }}</span
        ><i>{{ item.unit }}</i></span
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "panel-left-third",
  data() {
    return {
      dataInfo: [
        {
          label: "存储容量",
          number: 692,
          unit: "PB"
        },
        {
          label: "行业数据",
          number: 120,
          unit: "PB"
        },
        {
          label: "物联网数据",
          number: 572,
          unit: "PB"
        },
        {
          label: "数据专题库",
          number: "250",
          numberUnit: "+",
          unit: "PB"
        },
        {
          label: "数据资产类别",
          number: "120",
          numberUnit: "+",
          unit: "PB"
        }
      ]
    };
  }
};
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100%;
  padding: 0 3%;
}

.data-item {
  flex: 1;
  box-sizing: border-box;
  height: 100%;
}

.data-item i {
  display: inline-block;
  width: 100%;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.62vh;
  line-height: 1.4vw;
  text-align: left;
}

.data-item span {
  width: 100%;
  color: #44c7f2;
  font-weight: 600;
  font-size: 3.25vh;
  text-align: left;
}

.data-item span i {
  display: inline;
  color: #44c7f2;
  font-weight: 400;
  font-size: 1.62vh;
}

.data-item span .plus {
  font-size: 2.3vh;
}
</style>
